<!--
Template Name: mixTag
Create author: qinglong
Create Time  : 2021-01-20
-->
<template>
  <div class="mix-tag">
    <div class="top">
      <div class="title">已选标签:</div>
      <el-scrollbar>
        <div class="list">
          <template v-for="(item,index) in list">
            <el-tag v-show="item.checked" :key="item.id=''+index" v-bind="item" effect="dark" closable @close="onClose(item,index)">{{item[config.label] || item.label}}</el-tag>
          </template>
        </div>
      </el-scrollbar>
    </div>
    <div class="bottom">
      <div class="title">未选标签:</div>
      <el-scrollbar>
        <div class="list">
          <template v-for="(item,index) in list">
            <el-tag v-show="!item.checked" :key="index+''+item.id" v-bind="item" effect="plain" @click.stop="onAdd(item,index)">{{item[config.label] || item.label}} <i class="el-icon-plus"></i></el-tag>
          </template>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  name: 'mixTag',
  props: {
    value: { type: Array, default: () => [] },
    config: {},
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    value: {
      handler(a) {
        this.list = a;
      },
      immediate: true,
    },
    list: {
      handler(a) {
        let arr = a.filter((e) => e.checked);
        this.$emit('input', a);
        this.$emit('selection', arr);
      },
      deep: true,
    },
  },
  methods: {
    onClose(item, index) {
      delete item.checked;
      this.$set(this.list, index, item);
    },
    onAdd(item, index) {
      item.checked = true;
      this.$set(this.list, index, item);
    },
  },
};
</script>
<style lang='less' scoped>
.mix-tag {
  .title {
    font-size: 14px;
    color: #44444490;
  }
  .list {
    margin: 10px auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .top {
    min-height: 200px;
  }
  .el-tag {
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>